{% extends 'base.html' %}
{% load static %}

  {% block title %}
  <title>主机列表</title>
  {% endblock title %}

	{% block navheader %}
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-1">
          <div class="col-12">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">主机管理</li>
              <li class="breadcrumb-item active">主机列表</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
	{% endblock navheader %}
	
		  {% block content %}
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">
				主机列表{% if request.session.issuperuser %}<a href="javascript:void(0)" class="btn btn-sm btn-success ml-3 addsoft">新增 + </a>{% endif %}
			  </h3>
				<div class="card-tools">
				  <button type="button" class="btn btn-tool" data-widget="collapse">
					<i class="fas fa-minus"></i>
				  </button>
				  <button type="button" class="btn btn-tool" data-widget="remove">
					<i class="fas fa-times"></i>
				  </button>
				</div>
            </div>
            <!-- /.card-header -->
            <div class="card-body table-responsive">
              <table id="datatables-lists" class="table table-bordered table-hover">
                <thead>
                <tr>
				  <th>主机ID</th>
				  <th>类型</th>
				  <th>环境</th>
				  <th>名称</th>
				  <th>IP</th>
				  <th>公网IP</th>
				  <th>协议</th>
				  <th>端口</th>
				  <th>系统</th>
				  <th>用户名</th>
				  <th>添加时间</th>
                </tr>
                </thead>
                <tbody>
				{% for host in hosts %}
                <tr>
				  <td>{{ host.id }}</td>
				  <td>{{ host.host.get_type_display }}</td>
				  <td>{{ host.host.get_env_display }}</td>
				  {% if host.remote_user %}
				  <td>{{ host.host.hostname }}_{{ host.remote_user.name }}</td>
				  {% else %}
				  <td>{{ host.host.hostname }}</td>
				  {% endif %}
				  <td>{{ host.host.ip }}</td>
				  <td>{{ host.host.wip | default:'N/A' }}</td>
				  <td>{{ host.host.get_protocol_display }}</td>
				  <td>{{ host.host.port }}</td>
				  <td>{{ host.host.release }}</td>
				  {% if host.remote_user %}
				  <td>{{ host.remote_user.username }}</td>
				  {% else %}
				  <td>N/A</td>
				  {% endif %}
				  <td>{{ host.create_time|date:"Y/m/d H:i:s" }}</td>
                </tr>
				{% empty %}
                <tr>没有数据！</tr>
				{% endfor %}
                </tbody>
                <tfoot>
                <tr>
				  <th>主机ID</th>
				  <th>类型</th>
				  <th>环境</th>
				  <th>名称</th>
				  <th>IP</th>
				  <th>公网IP</th>
				  <th>协议</th>
				  <th>端口</th>
				  <th>系统</th>
				  <th>用户名</th>
				  <th>添加时间</th>
                </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
		  {% endblock content %}

{% block js %}
<!-- DataTables -->
<script src="{% static 'adminlte/plugins/datatables/jquery.dataTables.js' %}"></script>
<script src="{% static 'adminlte/plugins/datatables/dataTables.bootstrap4.js' %}"></script>
<script>
$("#datatables-lists").DataTable({
	language: {
		"sProcessing": "处理中...",
		"sLengthMenu": "显示 _MENU_ 项结果",
		"sZeroRecords": "没有匹配结果",
		"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
		"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
		"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
		"sInfoPostFix": "",
		"sSearch": "搜索:",
		"sUrl": "",
		"sEmptyTable": "表中数据为空",
		"sLoadingRecords": "载入中...",
		"sInfoThousands": ",",
		"oPaginate": {
			"sFirst": "首页",
			"sPrevious": "上页",
			"sNext": "下页",
			"sLast": "末页"
		},
		"oAria": {
			"sSortAscending": ": 以升序排列此列",
			"sSortDescending": ": 以降序排列此列"
		}
	},
	destroy: true,	// 允许重建
	bProcessing:true,  // 表格数据过多处理时显示: sProcessing
	lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "全部"]],
	order: [],
	 //scrollY: 480,	// 滚动条
	 //scrollCollapse: true,
	 //jQueryUI: true,
	 stateSave: true,	// 保存最后一次分页信息、排序信息，当页面刷新，或者重新进入这个页面，恢复上次的状态。
	 stateDuration: 86400,	// 本地储存(0~更大)还是session储存(-1) 
});
</script>
{% endblock js %}